// window.addEventListener('load', function() {
//     var main_image = document.querySelector('.main-image');
//     var mask = document.querySelector('.mask');
//     var big = document.querySelector('.big');
//     main_image.addEventListener('mouseover', function() {
//         mask.style.display = 'block';
//         big.style.display = 'block';
//     })
//     main_image.addEventListener('mouseout', function() {
//         mask.style.display = 'none';
//         big.style.display = 'none';
//     })
// })
function over() {
    console.log('123');
    var image_div = document.querySelector('.image-box');
    var main_image = document.querySelector('.main-image');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    image_div.addEventListener('mouseover', function() {
        mask.style.display = 'block';
        big.style.display = 'block';
    })
    image_div.addEventListener('mouseout', function() {
        mask.style.display = 'none';
        big.style.display = 'none';
    })
    image_div.addEventListener('mouseover', function(e) {
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        console.log(x, y);
        mask.style.left = x - 100 + 'px';
        mask.style.top = y - 100 + 'px';
    })
}

over();